<script lang="ts" defer async setup>
import { useUserInfo } from '@/store/user'
import { reactive, onMounted, ref } from 'vue'
import { login } from '@/api/login'
import { useI18n } from 'vue-i18n'
import eyeOpen from '@/static/img/eye-open.png'
import eyeClose from '@/static/img/eye-close.png'
const hasVisited = ref(uni.getStorageSync('hasVisited'))
const userInfoStore = useUserInfo()
const { t } = useI18n()

const baseData = reactive({
  showPassWord: false,
  current: 0,
  showFullscreenLoading: false,
  registerForm: {
    email: null,
    password: null,
    phone: null,
    from: null,
  },
})

const changType = (e: any) => {
  baseData.current = e
}
const goReg = () => {
  let queryUrl
  if (uni.getStorageSync('code')) {
    queryUrl = `?code=${uni.getStorageSync('code')}`
  }
  if (uni.getStorageSync('promo_code')) {
    queryUrl = `?code=${uni.getStorageSync('promo_code')}`
  }
  
  
  
  
  
  uni.navigateTo({
    url: '/pages/login/register',
  })
}
const forget = () => {
  window.top?.postMessage('/pages/login/forget', window.location.origin)
  uni.navigateTo({
    url: '/pages/login/forget',
  })
}
const bind = async () => {
  const params: any = {
    email: baseData.current ? baseData.registerForm.phone : baseData.registerForm.email,
    password: baseData.registerForm.password,
  }
   if (userInfoStore.isPwa) params.from = 'bookmark'
    baseData.showFullscreenLoading = true
  const res = await login(params)
  if (res.code == 0) {
    userInfoStore.setUserInfos(res.data)
    userInfoStore.setToken(res.data!.token)
	setTimeout(function () {
	  goHome()
	}, 1000)
  } else {
	   baseData.showFullscreenLoading = false
    uni.showToast({
      title: res.msg,
      icon: 'none',
    })
  }
  
  uni.setStorageSync('showTips', 1)
}
const goHome = () => {
  uni.setStorageSync('hasVisited', 'true')
  uni.setStorageSync('url', '/pages/index/index')
  window.top?.postMessage('/pages/index/index', window.location.origin)
  uni.redirectTo({
    url: '/pages/index/index',
  })
}
const leftClick = () => {
	window.top?.postMessage('/pages/login/guide', window.location.origin)
		uni.navigateTo({
		  url: '/pages/login/guide',
		})
}
onMounted(() => {
  
  uni.setNavigationBarTitle({
    title: 'Studio ' + t('Earn money so easy') + '!', 
  })
})
</script>

<template>
  <view class="login-container">
    
    <view class="simple-header">
      <view class="back-button" @click="leftClick">
        <image class="back-icon" src="@/static/img/left.png"></image>
      </view>
      <text class="page-title">{{t('login')}}</text>
      <view class="header-spacer"></view>
    </view>

    
    <view class="main-content">
      
  

      
      <view class="form-container">
        
        
        <view class="tab-switcher">
          <view 
            class="tab-item" 
            :class="{ active: baseData.current === 0 }"
            @click="changType(0)"
          >
            <text class="tab-text">{{ t('Email') }}</text>
          </view>
          <view 
            class="tab-item" 
            :class="{ active: baseData.current === 1 }"
            @click="changType(1)"
          >
            <text class="tab-text">{{t('Phone')}}</text>
          </view>
        </view>

        
        <view class="input-group">
          <view class="input-wrapper" v-show="baseData.current === 0">
            <up-input 
              v-model="baseData.registerForm.email"
              type="email"
			  prefixIcon="email-fill"
			  prefixIconStyle="font-size: 18px;color: #FE8400"
              :placeholder="t('Email')"
              class="input-field"
            />
          </view>

          <view class="input-wrapper" v-show="baseData.current === 1">
            <up-input 
              v-model="baseData.registerForm.phone"
              type="tel"
			  prefixIcon="phone-fill"
			  prefixIconStyle="font-size: 18px;color: #FE8400"
              :placeholder="t('Phone Number')"
              class="input-field"
            />
          </view>

          <view class="input-wrapper">
            <up-input 
              v-model="baseData.registerForm.password"
              :type="baseData.showPassWord ? 'text' : 'password'"
              :placeholder="t('Password')"
              class="input-field"
			  prefixIconStyle="font-size: 18px;color: #FE8400"
			  prefixIcon="lock-fill"
            />
            <view 
              class="password-toggle" 
              @click="baseData.showPassWord = !baseData.showPassWord"
            >
              <image class="toggle-icon" :src="baseData.showPassWord ? eyeOpen : eyeClose"/>
            </view>
          </view>
        </view>

        
        <button class="login-btn" @click="bind()">
          <text class="btn-text">{{ t('Sign In') }}</text>
        </button>

        
        <view class="register-link">
          <text class="register-text">{{ t('Don\'t have an account') }}? </text>
          <text class="register-btn" @click="goReg()">{{ t('Create Account') }}</text>
        </view>
      </view>
    </view>

    
    <view v-if="baseData.showFullscreenLoading" class="loading-overlay">
      <view class="loading-spinner"></view>
      <text class="loading-text">{{ t('login') }}</text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import '@/styles/auth-common.scss';

.login-container {
  @extend .auth-container;
}

.simple-header {
  @extend .simple-header;
}

.main-content {
  @extend .main-content;
}

.brand-section {
  @extend .brand-section;
}

.form-container {
  @extend .form-container;
}

.tab-switcher {
  @extend .tab-switcher;
}

.input-group {
  @extend .input-group;
}

.login-btn {
  @extend .circular-btn;
}

.register-link {
  @extend .auth-link;
}

.loading-overlay {
  @extend .loading-overlay;
}
</style>